<div class="app-content-body ">   
    <div class="bg-light lter b-b wrapper-md hidden-print">
      <h1 class="m-n font-thin h3">权益消费列表</h1>
    </div>
    <div class="form_title">
      <div class="my_hd edit-type">新增</div>
      <div class="crud-container crud-reset">
        <form id="form-container">
          <div class="row"> 
            <div class="col-sm-12">
              <div id="form"></div>
            </div>
          </div>          
          <div class="row">
            <div class="col-sm-12 text-right" style="margin-top: 15px;">
                <div id="cancel"></div>
                <div id="save"></div>
            </div>
          </div>
        </form>
      </div>
   </div>
</div>
<script>
$(function(){
	 $("#content").one("route.loaded", function(e, context) {
	    var store = $.crudStore(API("rightsConsumes")), memberStore = $.crudStore(API('members')),
	    id = context.params.id, formData = {},
	    simpleProducts = [{type:"static",html:"静泊"},{type:"sea",html:"出海"}];
	    var formItems = [{
          dataField: "user.mobile",
          label: {text: '会员手机'},
          editorType: 'dxAutocomplete',
          validationRules: [{
	            type: "required",
	            message: "请输入会员手机号"
	     }],
          editorOptions: {
            dataSource: memberStore,
            valueExpr: "id",
            searchExpr: 'mobile',
            itemTemplate: function(data) {
                return data ? $("<div>" + (data.mobile || "") + "</div>") : null;
            },
            onItemClick: function(e) {
              var form = $("#form").dxForm("instance"), data = $.extend({}, form.option('formData'), 
              {user: e.itemData, quantity: e.itemData.subject_count});
              form.updateData(data);
            }
          }
        },{
          dataField: "user.username",
          label: {text: '会员姓名'},
          editorOptions: {readOnly: true},
      },{
          dataField: "user.identity_card",
          label: {text: '会员证件号'},
          editorOptions: {readOnly: true}
      },{
          dataField: "user.last_static_time",
          label: {text: '当前剩余静泊时间'},
          editorOptions: {readOnly: true}
      },{
          dataField: "user.last_sea_time",
          label: {text: "当前剩余出海时间"},
          editorOptions: {readOnly: true}
      },{
      	  dataField: "format_type",
      	  editorOptions: {
        	dataSource: simpleProducts,
        	valueExpr:"type",
          	displayExpr:"html"
          },
      	  editorType:"dxSelectBox",
          label: {text: '使用权益类型'},
          validationRules: [{
              type: "required",
              message: "请选择使用权益类型" 
          }]
      },{
		  dataField: "time",
          label: {text: '使用时长'},
          editorType: 'dxNumberBox',
          editorOptions: {showSpinButtons: true,min:0},
          validationRules: [{
              type: "required",
              message: "请输入使用时长" 
          }]
      },{
	       dataField: "consume_date",
	       editorType: 'dxDateBox',
	       editorOptions: {type: 'date', displayFormat: 'yyyy-MM-dd', dateSerializationFormat: 'yyyy-MM-dd'},
	       label: {text: '使用日期'},
	       validationRules: [{
	            type: "required",
	            message: "请输入使用日期"
	       }]
	  }]
      formItems = formItems.concat([{
          dataField: "file",
          label: {text: '附件'},
          editorType: "dxFileUploader",
          editorOptions:{
            uploadMode: 'useForm',
            multiple: false,
            accept: "*",
            value: []
          }
      },{
          dataField: "remark",
          label: {text: '备注'},
          editorType: "dxTextArea",
          editorOptions: {
              height: 140
          }
      }]);

      var form = $("#form").dxForm({
        formData: {money: '', remark: '', quantity: 0, user: {}},
        showColonAfterLabel: true,
        showValidationSummary: false,
        validationGroup: "crud",
        items: formItems
      }).dxForm("instance");


      $("#form-container").on("submit", function(e) {
        var data = form.option('formData'), s = $.crudStore(API("rights-consume"));

        if (! data.user.id) {
          DevExpress.ui.dialog.alert('请指定合约对应的手机号', '提示');
          return false;
        }

//      $("#save").dxButton('option', 'disabled', true);

        var udata = {
          remark: data.remark,
          user_id: data.user.id,
          type:data.format_type,
          time:data.time,
          consume_date:data.consume_date,
          remark:data.remark
        };

        s.insert(udata).then(function (resp,values) {
          if(!values.success){
	         	var _text = values.msg
	         	DevExpress.ui.dialog.alert(_text, '提示');
	            return false;
	      }else{
	           	 DevExpress.ui.notify({
		              message: "已完成",
		     }, "success", 1000);
	     		context.redirect("#/rightsConsume");
		  }
          console.log(resp);
        }).fail(function () {
	          	DevExpress.ui.notify({
	          	message: $.crudStoreResp.msg,
         	}, "warning", 2000);
	          	$("#save").dxButton('option', 'disabled', false);
        });
        return false;
      });

      $("#save").dxButton({
        text: "保存",
        type: "success",
        useSubmitBehavior: true,
        validationGroup: "crud"
      });

      $("#cancel").dxButton({
          text: "取消",
          type: "normal",
          onClick:function() {
            context.redirect("#/rightsConsume");
          }
      });
   })
})
</script>